<template>
  <nav class="navbar navbar-dark bg-dark px-4" style="height:70px;">
    <span class="navbar-brand mb-0 h1" style="cursor:pointer; font-size: 1.8rem;" @click="goHome">首页</span>
    <div class="navbar-nav d-flex flex-row flex-grow-1 justify-content-start">

      <!-- 基金选项及子选项 -->
      <div class="nav-item">
        <a class="nav-link px-2" href="#" style="font-size: 1.2rem;" @click.prevent="toggleDropdown('fund')">
          基金
        </a>
        <div class="fund-sub-options" v-show="isFundDropdownOpen">
          <a class="dropdown-item" v-for="category in fundCategories" :key="category.type" @click="goToFund(category.type, category.path)">{{ category.name }}</a>
        </div>
      </div>

      <!-- 指数选项及子选项 -->
      <div class="nav-item">
        <a class="nav-link px-2" href="#" style="font-size: 1.2rem;" @click.prevent="toggleDropdown('index')">
          指数
        </a>
        <div class="index-sub-options" v-show="isIndexDropdownOpen">
          <a class="dropdown-item" v-for="category in indexCategories" :key="category.type" @click="goToIndex(category.type, category.path)">{{ category.name }}</a>
          <a class="dropdown-item" @click="goTo('/dashboard/index/analysis')">智能分析</a>
        </div>
      </div>

      <!-- 自选链接 -->
      <div class="nav-item">
        <a class="nav-link px-2" href="#" style="font-size: 1.2rem;" @click.prevent="goTo('/dashboard/favorites')">自选</a>
      </div>

    </div>
    <button class="btn btn-outline-light" @click="handleLogout">退出账号</button>
  </nav>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const isFundDropdownOpen = ref(false);
const isIndexDropdownOpen = ref(false);

// Define the list of fund categories (copied from AppSidebar.vue)
const fundCategories = [
  { name: '消费', type: '必需消费', path: 'consumption' },
  { name: '科技', type: '科技', path: 'science' },
  { name: '金融', type: '金融', path: 'finance' },
  { name: '医疗健康', type: '医疗健康', path: 'healthcare' },
  { name: '新能源与环保', type: '新能源与环保', path: 'newenergy' },
  { name: '周期大宗商品', type: '周期大宗商品', path: 'cyclecommodities' },
  { name: '房地产基建', type: '房地产基建', path: 'realestateinfrastructure' },
  { name: '国际区域', type: '国际区域', path: 'internationalregional' },
  { name: '新兴产业', type: '新兴产业', path: 'emergingindustries' },
  { name: '传统产业', type: '传统产业', path: 'traditionalindustries' },
];

const indexCategories = [
  { name: '沪深300', type: '沪深300', path: 'hushen300' },
  { name: '上证50', type: '上证50', path: 'sse50' },
  { name: '上证指数', type: '上证指数', path: 'shanghai_stock_exchange_index' },
  { name: '深证成指', type: '深证成指', path: 'shenzhen_component_index' },
  { name: '中证500', type: '中证500', path: 'zhongzheng500' },
  { name: '中证1000', type: '中证1000', path: 'zhongzheng1000' },
  { name: '中证A50', type: '中证A50', path: 'zhongzhenga50' },
];

const goHome = () => {
  router.push('/welcome');
  closeDropdowns();
};

const goTo = (path) => {
  router.push(path);
  closeDropdowns();
};

const goToFund = (type, path) => {
  router.push({ name: 'FundDashboardByType', params: { type: type, board: path } });
  closeDropdowns();
};

const goToIndex = (type, path) => {
   router.push({ name: 'IndexDashboardByType', params: { type: type, board: path } });
   closeDropdowns();
};

const handleLogout = () => {
  // 清除登录标志
  localStorage.removeItem('isLoggedIn');
  // 跳转到登录页
  router.push('/login');
};

const toggleDropdown = (menuType) => {
  if (menuType === 'fund') {
    isFundDropdownOpen.value = !isFundDropdownOpen.value;
    isIndexDropdownOpen.value = false; // Close other dropdown
  } else if (menuType === 'index') {
    isIndexDropdownOpen.value = !isIndexDropdownOpen.value;
    isFundDropdownOpen.value = false; // Close other dropdown
  }
};

const closeDropdowns = () => {
  isFundDropdownOpen.value = false;
  isIndexDropdownOpen.value = false;
};

// Close dropdowns when clicking outside
window.addEventListener('click', (e) => {
  if (!e.target.closest('.navbar-nav')) {
    closeDropdowns();
  }
});

</script>
<style scoped>
.navbar-nav .nav-item {
  position: relative; /* Needed for absolute positioning of sub-options */
  margin-right: 25px; /* Further increased spacing between nav items */
}

.navbar-nav .nav-link {
  cursor: pointer;
}

.fund-sub-options,
.index-sub-options {
  position: absolute;
  top: 70px; /* Position directly below the 70px high navbar */
  left: 0;
  background-color: #343a40; /* Darker background */
  border: 1px solid #454d55; /* Darker border */
  border-top: none;
  z-index: 1000;
  padding: 8px 0;
  min-width: 100%; /* Adjust width as needed */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.fund-sub-options a,
.index-sub-options a {
  display: block;
  padding: 8px 16px;
  color: #dee2e6;
  text-decoration: none;
}

.fund-sub-options a:hover,
.index-sub-options a:hover {
  background-color: #495057;
  color: #fff;
}

/* Removed other Bootstrap dropdown related styles */

</style> 